<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>患者接待</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel='stylesheet' href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
    <style type="text/css">
        #contentWrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #contentRight {
            padding: 1.0rem 0rem;
            margin-left: 0px;
        }

        #drugInfo{
            color: #427c97;
            font-size: 30px;
            font-weight: bold;
            position: relative;
            top:10px;
            height: 50px;
        }
        .button {
            margin: 10px 5px;
            padding: 8px 13px;
            border-radius: 10px;
            border: 2px solid;
            font: 16px 'Open Sans', sans-serif;
            text-transform: uppercase;
            background: none;
            outline: none;
            cursor: pointer;
            -webkit-transition: all .5s;
            transition: all .5s;
            float: right;
            top:6px;
        }
        .btn-3 {
            color: #427c97;
            border-color: #427c97;
            position: relative;
            overflow: hidden;
        }
        .btn-3:before {
            content: "";
            position: absolute;
            top: 0;
            right: -5px;
            width: 0;
            height: 100%;
            background-color: #427c97;
            z-index: -1;
            -webkit-transition: all .5s;
            transition: all .5s;
        }
        .btn-3:hover {
            color: #27323A;
        }
        .btn-3:hover:hover:before {
            width: 110%;
        }
        #divcss5{
            position: relative;
            left: 250px;
            line-height: 50px;
        }
        input{
            border: 1px solid #427c97;
            border-radius: 10px;
            outline: none;
            height: 20px;
            width: 150px;
        }
        #tableArea .dataTables_wrapper {
            position: relative;
            clear: both;
            zoom: 1;
            overflow-x: auto; }
        #tableArea table{    width: 1500px; }

    </style>
</head>
<body>
<div id="contentWrapper">
    <div id="contentRight">
        <div class="title">
            <label id="drugInfo">患者接待</label>
            <button class="button btn-3" data-button="#2980b9" id="finish">完成</button>
            <button class="button btn-3" data-button="#2980b9" id="addD">添加</button>
        </div>
    </div>
    <h1></h1>
    <hr size="3px" noshade=true color="#427c97">
    <div >
        <div style="text-align: left">
            <label style="color: #427c97;margin-left: 500px">药品编号：</label>
            <input type="text" id="no" >
            <br/>
            <br/>
            <label style="color: #427c97;margin-left: 500px">药品数量：</label>
            <input type="text" id="num" >
        </div>
        <div class="tableArea">
            <table cellspacing="0" class="display table table-bordered" id="example">
                <thead>
                <tr>
                    <th>药品编号</th>
                    <th>药品名称</th>
                    <th>药品别名</th>
                    <th>规格</th>
                    <th>单位</th>
                    <th>产地</th>
                    <th>数量</th>
                    <th>类型</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item:${items}">
                    <td th:text="${item.getItemNo()}"></td>
                    <td th:text="${item.getItemName()}"></td>
                    <td th:text="${item.getItemAliasName()}"></td>
                    <td th:text="${item.getItemSpec()}"></td>
                    <td th:text="${item.getItemUnit()}"></td>
                    <td th:text="${item.getItemMadein()}"></td>
                    <td th:text="${item.getItemNums()}"></td>
                    <td th:text="${item.getItemType()}"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <span id="result" th:text="${result}" th:hidden="true"></span>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $("#example").dataTable({
            "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
            "aLengthMenu" : [5, 10, 15], //更改显示记录数选项
            "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
            "bAutoWidth" : false, //是否自适应宽度

            //"bJQueryUI" : true,
            "oLanguage": { //国际化配置
                "sProcessing" : "正在获取数据，请稍后...",
                "sLengthMenu" : "显示 _MENU_ 条",
                "sZeroRecords" : "没有您要搜索的内容",
                "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty" : "记录数为0",
                "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                "sInfoPostFix" : "",
                "sSearch" : "搜索",
                "sUrl" : "",
                "oPaginate": {
                    "sFirst" : "第一页",
                    "sPrevious" : "上一页",
                    "sNext" : "下一页",
                    "sLast" : "最后一页"
                }
            }
        });
        $("#addD").click(function () {
            var no = $("#no").val();
            var num = $("#num").val();
            $.ajax({
                type:"post",
                url:"/receptionAdd",
                dataType:"json",
                traditional:true,
                data:{"itemNo":no,"logDNum":num},
            });
            window.location.href="/toAdd"
        });
       $(function () {
           var result = document.getElementById("result").innerText;
           if(result!="")
           {
               alert(result);

           }
       });
       $("#finish").click(function () {
           window.location.href="/finish"

       });

    });
</script>
</html>